const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

//--------------关于棋盘--------------
//一行分为几个格子 
let tileCount = 20;
//每个格子的大小，最后-2是为了美观
let tileSize = canvas.width / tileCount - 2;


let headX = 10;
let headY = 10;
let enemyX1 = 0;
let enemyY1 = 0;
let enemyX2 = 5;
let enemyY2 = 15;
let enemyX3 = 12;
let enemyY3 = 12;

let tailLength = 2;

let speed = 8;//速度
let time = 3000;//时间

//改变行动方向
let inputsXVelocity = 0;
let inputsYVelocity = 0;

//点数的坐标
scoremap = [		//地图数据
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 0, 0, 0, 0, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1],
    [1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1],
    [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1],
    [1, 1, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, 1],
    [1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 0, 0, 0, 1],
    [1, 1, 0, 1, 1, 1, 5, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1],
    [1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1],
    [1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1],
    [1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1],
    [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1],
    [1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1],
    [1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1],
    [1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];


map = [		//地图数据
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1],
    [0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1],
    [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1],
    [0, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1],
    [0, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1],
    [0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 0, 1],
    [0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1],
    [0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1],
    [0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1],
    [0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1],
    [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1],
    [0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1],
    [0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1],
    [0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];


//记录分数
let score = 0;

//-----------------------------------------
//--------------函数：实现功能--------------
//-----------------------------------------

///////------------游戏的核心函数：运行游戏-----------/////
function drawGame() {

    console.log("headX", headX)
    console.log("headY", headY)

    //更新豆的位子：当你用按下上下左右的按键后，豆就会动起来，因为每次豆头的横坐标或者纵坐标都在+1，-1
    changeSnakePosition();
    changeenemy();
    //如果游戏结束，停止循环
    let result = isGameOver();
    if (result) {
        return;
    }

    //黑色背景
    clearScreen();

    //查看是否吃到点数
    checkscoreCollision();

    //画一个点数
    drawscore();
    drawwall();
    
    //画吃豆人
    drawSnake();
    //画敌人
    drawenemy();
    //画分数
    drawScore();


    //用setTimeOut（）不停的循环游戏：每隔（1000/speed）时间就更新一下游戏页面，吃豆人就动起来了。1000是毫秒=1秒钟
    setTimeout(drawGame, time / speed);



}

//文字介绍
function drawScore() {
    ctx.fillStyle = "pink";
    ctx.font = "22px Verdana";
    ctx.fillText("pink:改变地图", canvas.width - 400, 430);
    ctx.fillStyle = "purple";
    ctx.font = "22px Verdana";
    ctx.fillText("purple:获得穿墙", canvas.width - 200, 430);
    /*ctx.fillStyle = "green";
    ctx.font = "20px Verdana";
    ctx.fillText("分数" + score, canvas.width - 100, 430);
*/
}


//在画板上画一个黑色背景，大小就是整个画板的大小
function clearScreen() {
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(400, 0);
    ctx.lineTo(400, 400);
    ctx.lineTo(0, 400);
    ctx.fill();
}

//画点数：x坐标为j* tileCount，y坐标为i* tileCount，宽和高为自选
function drawscore() {
    for (i = 0; i < 19; i++) {
        for (j = 0; j < 19; j++) {
            if (scoremap[i][j] == 0) {
                ctx.fillStyle = "blue";
                ctx.fillRect(j * tileCount + 5, i * tileCount + 5, 5, 5);
            }
            if (scoremap[i][j] == 5) {
                ctx.fillStyle = "purple";
                ctx.fillRect(j * tileCount + 5, i * tileCount + 5, 8, 8);
            }
            if (scoremap[i][j] == 10) {
                ctx.fillStyle = "pink";
                ctx.fillRect(j * tileCount + 5, i * tileCount + 5, 8, 8);
            }
        }
    }


}
function drawwall() {
    for (i = 0; i < 19; i++) {
        for (j = 0; j < 19; j++) {
            if (map[i][j] == 1) {
                ctx.fillStyle = "white";
                ctx.fillRect(j * tileCount, i * tileCount, tileSize, tileSize);
            }

        }
    }


}
//画豆
function drawSnake() {
    ctx.fillStyle = "yellow";
    ctx.fillRect(headX * tileCount, headY * tileCount, tileSize, tileSize);
}

//画敌人
function drawenemy() {
    ctx.fillStyle = "gold";
    ctx.fillRect(tileCount * enemyX3, tileCount * enemyY3, tileSize, tileSize);
    ctx.fillStyle = "grey";
    ctx.fillRect(tileCount * enemyX1, tileCount * enemyY1, tileSize, tileSize);
    ctx.fillStyle = "green";
    ctx.fillRect(tileCount * enemyX2, tileCount * enemyY2, tileSize, tileSize);
}

//移动
function changeSnakePosition() {
    headX = headX + inputsXVelocity;
    headY = headY + inputsYVelocity;
    /*if (inputsXVelocity == 1 && inputsYVelocity == 0) {
        if (map[headY][headX - 1] == 1) {
            time = 1000000;
        }
    }
    if (inputsXVelocity == 0 && inputsYVelocity == 1) {
        if (map[headY + 1][headX] == 1) {
            time = 1000000;
        }
    }
    if (inputsXVelocity == 0 && inputsYVelocity == -1) {
        if (map[headY - 1][headX] == 1) {
            time = 1000000;
        }
    }
    if (inputsXVelocity == -1 && inputsYVelocity == 0) {
        if (map[headY][headX - 1] == 1) {
            time = 1000000;
        }
    }
    */
    console.log(time);

}
function changeenemy() {
    a1 = Math.round(Math.random() * 2 - 1);
    a2 = Math.round(Math.random() * 2 - 1);
    b1 = Math.round(Math.random() * 2 - 1);
    b2 = Math.round(Math.random() * 2 - 1);
    c1 = Math.round(Math.random() * 2 - 1);
    c2 = Math.round(Math.random() * 2 - 1);
    if (a1 == 0 && a2 != 0 || a1 != 0 && a2 == 0) {
        enemyY1 = enemyY1 + a1;
        enemyX1 = enemyX1 + a2;
    };
    if (b1 == 0 && b2 != 0 || b1 != 0 && b2 == 0) {
        enemyY2 = enemyY2 + b1;
        enemyX2 = enemyX2 + b2;
    };
    if (c1 == 0 && c2 != 0 || c1 != 0 && c2 == 0) {
        enemyY3 = enemyY3 + c1;
        enemyX3 = enemyX3 + c2;
    };
    if (enemyY1 < 2) {
        enemyY1 = enemyY1 + 1;
    };
    if (enemyX1 < 2) {
        enemyX1 = enemyX1 + 1;
    };
    if (enemyY2 < 2) {
        enemyY2 = enemyY2 + 1;
    };
    if (enemyX2 < 2) {
        enemyX2 = enemyX2 + 1;
    }
    if (enemyY3 < 2) {
        enemyY3 = enemyY3 + 1;
    };
    if (enemyX3 < 2) {
        enemyX3 = enemyX2 + 1;
    }
    if (enemyY1 > 18) {
        enemyY1 = enemyY1 - 1;
    };
    if (enemyX1 > 18) {
        enemyY1 = enemyY1 - 1;
    };
    if (enemyY2 > 18) {
        enemyY2 = enemyY2 - 1;
    };
    if (enemyX2 > 18) {
        enemyX2 = enemyX - 1;
    };
    if (enemyY3 > 18) {
        enemyY3 = enemyY3 - 1;
    };
    if (enemyX3 > 18) {
        enemyX3 = enemyX3 - 1;
    };

    if (enemyY3 + 5 < headY) {
        enemyY3 = enemyY3 + 1;
    };
    if (enemyX3 + 5 < headX) {
        enemyX3 = enemyX3 + 1;
    };
    if (enemyY1 + 5 < headY) {
        enemyY1 = enemyY1 + 1;
    };
    if (enemyX1 + 5 < headX) {
        enemyX1 = enemyX1 + 1;
    };
    if (enemyY2 + 5 < headY) {
        enemyY2 = enemyY2 + 1;
    };
    if (enemyX2 + 5 < headX) {
        enemyX2 = enemyX2 + 1;
    };
}



//看看是否吃到点数
function checkscoreCollision() {
    for (i = 0; i < 19; i++) {
        for (j = 0; j < 19; j++) {
            if (scoremap[headY][headX] == 0) {
                score = score + 1;
                scoremap[headY][headX] = 2;
                time = 3000;
            }
            if (scoremap[headY][headX] == 5) {
                scoremap[headY][headX] = 2;
                time = 8000;
                score = score + 1;
            }
            if (scoremap[headY][headX] == 10) {
                scoremap[headY][headX] = 2;
                score = score + 1;
                time = 8000;

                map = [		//地图数据
                    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                    [0, 1, 10, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1],
                    [0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1],
                    [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
                    [0, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1],
                    [0, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1],
                    [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 1],
                    [0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1],
                    [0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1],
                    [0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
                    [0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1],
                    [0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 1],
                    [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1],
                    [0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1],
                    [0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1],
                    [0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1],
                    [0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
                    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                ];
            }
        }

    }
}

//查看游戏是否结束
function isGameOver() {
    let gameOver = false;
    if (inputsXVelocity === 0 && inputsYVelocity === 0) {
        return false;
    }

    //豆撞到四周墙死，吃到50分胜利
    if (headX < 1 || headY < 1 || headY > 18 || headX > 18) {
        gameOver = true;
        ctx.fillStyle = "red";
        ctx.font = "50px Verdana";
        ctx.fillText("游戏结束！", 100, 200);
        return gameOver;
    }
    if (headX == enemyX1 && headY == enemyY1) {
        gameOver = true;
        ctx.fillStyle = "red";
        ctx.font = "50px Verdana";
        ctx.fillText("游戏结束！", 100, 200);
        return gameOver;
    }
    if (headX == enemyX2 && headY == enemyY2) {
        gameOver = true;
        ctx.fillStyle = "red";
        ctx.font = "50px Verdana";
        ctx.fillText("游戏结束！", 100, 200);
        return gameOver;
    }
    if (headX == enemyX3 && headY == enemyY3) {
        gameOver = true;
        ctx.fillStyle = "red";
        ctx.font = "50px Verdana";
        ctx.fillText("游戏结束！", 100, 200);
        return gameOver;
    }
    if (score > 60) {
        gameOver = true;
        ctx.fillStyle = "red";
        ctx.font = "50px Verdana";
        ctx.fillText("胜利！", 100, 200);
        return gameOver;
    }

}

//键盘监听器
document.body.addEventListener("keydown", keyDown);

function keyDown(event) {
    //按键盘的上键 
    //event.keycode这些数字都是有固定搭配的，不同数字对应不同的方向
    //if (time > 50000) { time = 3000; }
    console.log("onepress")
    if ((event.keyCode == 38 || event.keyCode == 87) && map[headY - 1][headX] == 0) {
        //87 对应w键
        //如果蛇正在向下移动，那就不能向上移动了
        console.log("headX", map[headY][headX]);
        if (inputsYVelocity == 1) return;
        inputsYVelocity = -1;
        inputsXVelocity = 0;
    }

    ///按键盘的下键
    if ((event.keyCode == 40 || event.keyCode == 83) && map[headY + 1][headX] == 0) {
        // 83 对应s键
        if (inputsYVelocity == -1) return;
        inputsYVelocity = 1;
        inputsXVelocity = 0;
    }

    ///按键盘的左键
    if ((event.keyCode == 37 || event.keyCode == 65) && map[headY][headX - 1] == 0) {
        // 65 对应a键
        if (inputsXVelocity == 1) return;
        inputsYVelocity = 0;
        inputsXVelocity = -1;
    }

    ///按键盘的右键
    if ((event.keyCode == 39 || event.keyCode == 68) && map[headY][headX + 1] == 0) {
        //68 对应d键
        if (inputsXVelocity == -1) return;
        inputsYVelocity = 0;
        inputsXVelocity = 1;
    }
}
drawGame();

